<!--
 * @Date: 2020-07-11 11:39:28
 * @LastEditors: leehave
 * @LastEditTime: 2020-09-08 16:29:29
--> 
<template>
  <div class="chargeStatusWrpper">
    <div :style="{'background-color':checkStatus(chargeStatus)}">
      <div class="outer">
      <div :class="renderClass(chargeStatus)">
        <div class="waveBg">
          <div class="wave" :style="{'height':waveHeight}"></div>
        </div>
        <div class="content-Wrapper">
          <div v-if="suspendstyle">
            <div class="countdown">
              <div style="font-size:14px;height:15px;">{{power}}</div>
            </div>
            <div style="font-size:16px;height:25px;">{{countdown}}</div>
            <div
              class="countDesc"
            >{{ [3,4,5].includes(chargeStatus) ? '正在充电' : chargeStatus !== 0 ? '正在启动中' : '请接上电缆' }}</div>
          </div>

          <div v-else>
            <div class="suspendimg">
              <img :src="trianglewarning" />
            </div>
            <div class="suspendtext">已断电!!!</div>
          </div>

          <div :class="renderAnimate(chargeStatus)"></div>
          <div :class="chargeStatus?'line':'lineNoAnimation'"></div>
        </div>
      </div>
    </div>
    <div class="siteWrapper">
          <div class="siteName">铁道金城花园4号楼</div>
          <div class="sitePort">铁道金城花园大功率号桩2路端口</div>
        </div>
    </div>
    
    <wave-cloud :background="checkStatus(chargeStatus)" :waveNum="waveNum"></wave-cloud>
    <div class="bg-cloud"></div>
    <div class="shuntiming clearfloat">
      <div class="starttiming">
        <div class="starttxt">开始时长</div>
        <div class="starttime">{{Isthetiming}}</div>
      </div>
      <div class="monetary">
        <div class="monetarytxt">消费金额</div>
        <div class="monetarynum">{{expectedconsume?expectedconsume:0}}</div>
      </div>
    </div>
    <div class="publicNumberBB"></div>
    <div class="button-group">
      <van-button round :style="{'background': checkStatus(chargeStatus)}" class="powerStart" v-if="chargeStatus!=null&&chargeStatus!=2&&suspendstyle">{{chargeStatus?'结束充电':'电缆已接好'}}</van-button>
      <van-button round class="backindexbtn" v-if="chargeStatus!=null&&!chargeStatus&&suspendstyle">结束充电</van-button>
      <van-button round class="backindexbtn" v-if="chargeStatus&&suspendstyle">返回首页</van-button>
    </div>
    
    <div class="warningtip" v-if="!suspendstyle">
      <div class="warningtipimg">
        <div style="display:inline-block;vertical-align:middle;">
          <img :src="trianglewarning" />
        </div>
        <div class="warningtiptxt">目前充电桩临时断电，此期间不计任何费用，电力恢复时将继续充电，请耐心等待!</div>
      </div>
      <van-button round class="powerToStop">结束充电</van-button>
    </div>
  </div>
</template>

<script>
import staticPath from "@/assets/json/index";
import waveCloud from "@/components/cloud/index";
export default {
  data() {
    return {
      chargeStatus: 3,
      power: 0,
      Isthetiming: "00:00:00",
      countdown: "00:00:00",
      waveHeight: "90%",
      context: "",
      finshtext: "",
      txtColor: "",
      finshreason: "",
      siteName: "",
      suspendstyle: !0,
      expectedconsume: "",
      backdround: "#409eff",
      waveNum: 2,
      trianglewarning: staticPath.trianglewarning
    };
  },
  computed: {

  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    checkStatus(status) {
      const chargeColor = {
        "0": "#BCBCBC",
        "1": "#1EC678",
        "2": "#1EC678",
        "3": "#409eff",
        "4": "#409eff",
        "5": "#BCBCBC",
        "6": "#BCBCBC"
      };
      return chargeColor[status];
    },
    renderClass(status) {
      if ([3, 4, 5].indexOf(status) !== -1) {
        return "content";
      } else if ([1, 2, 6].indexOf(status) !== -1) {
        return "waiting";
      } else {
        return "nobind";
      }
    },
    renderAnimate(status) {
      if ([2, 3, 4, 5].indexOf(status) !== -1) {
        return "box";
      } else {
        return "boxNoAnimation";
      }
    }
  },
  components: {
    waveCloud
  }
};
</script>

<style scoped lang="less">
.bg-top {
  background: #1ec678;
}

.bg-top,
.redbg-top {
  padding: 25px 0 15px;
}

.redbg-top {
  background: #bcbcbc;
}

.orangebg-top {
  padding: 25px 0 15px;
  background: #1ec678;
}

.outer {
  width: 180px;
  height: 180px;
  position: relative;
  margin: 0px auto 0;
}

.content-Wrapper {
  position: absolute;
  width: 100%;
  top: 55%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
}

.countdown {
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  margin-top: -15px;
  height: 20px;
}

canvas {
  position: absolute;
  left: -10%;
  top: 2%;
  right: 0;
  text-align: center;
  margin: 0 auto;
}

.countDesc {
  font-size: 14px;
  line-height: 20px;
}

.chargearea {
  text-align: center;
  margin-top: 14px;
}

.siteNameAndCollected {
  display: flex;
  align-items: center;
  justify-content: center;
}

.siteNameAndCollected image {
  width: 20px;
  height: 20px;
  margin-left: 15px;
}

.icon {
  width: 30px;
  height: 30px;
}

.areaDtl,
.icon {
  display: inline-block;
  vertical-align: middle;
}

.areaDtl {
  color: #fff;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 6px;
}

.changeicon {
  font-size: 25px;
  line-height: 25px;
  color: #fff;
}

.portlocation {
  color: #fff;
  font-size: 12px;
  padding: 0 16px;
}

.content,
.waiting,
.nobind {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  // border: 2px solid #fff;
}


.content,
.redcontent,
.waiting,
.nobind {
  background-repeat: none;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
}

.redcontent {
  
  width: 130px;
  height: 130px;
  border-radius: 50%;
}

.box {
  background-size: 140px 140px;
  animation: moveover 3s linear infinite;
  transform-origin: 50% 50%;
}

.box,
.boxNoAnimation {
  position: absolute;
  width: 140px;
  height: 140px;
  left: 50%;
  top: 50%;
  z-index: 4;
  
  background-position: 50%;
  background-repeat: no-repeat;
}

.boxNoAnimation {
  transform: translate(-50%, -50%);
}

.box1 {
  border-radius: 70px 0 0 70px;
  background: linear-gradient(#cad38c, #d0cfcf);
  z-index: 2;
}

.box1,
.box2 {
  position: absolute;
  width: 70px;
  height: 140px;
}

.box2 {
  border-radius: 0 70px 70px 0;
  left: 50%;
  background: linear-gradient(#eee, #d0cfcf);
  z-index: 1;
}

.line {
  top: 50%;
  left: 50%;
  animation-name: bigCircleAnimation;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.line,
.lineNoAnimation {
  
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 170px;
  height: 170px;
  position: absolute;
  margin-left: -85px;
  margin-top: -85px;
}

.lineNoAnimation {
  top: 50%;
  left: 50%;
}

.hehongColor {
  color: #c30;
}

.defaultColor {
  color: #fff;
}

@-webkit-keyframes moveover {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

@keyframes moveover {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

@keyframes bigCircleAnimation {
  0% {
    filter: opacity(100%);
    transform: rotate(1turn);
  }

  to {
    filter: opacity(100%);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes bigCircleAnimation {
  0% {
    filter: opacity(100%);
    transform: rotate(1turn);
  }

  to {
    filter: opacity(100%);
    transform: rotate(0deg);
  }
}

.shuntiming {
  width: 100%;
  text-align: center;
}

.monetary,
.starttiming {
  float: left;
  width: 50%;
}

.starttxt {
  color: #333;
  font-size: 14px;
}

.starttime {
  font-weight: 700;
  font-size: 14px;
}

.monetarytxt {
  color: #333;
  font-size: 14px;
}

.monetarynum {
  color: #e97841;
  font-size: 18px;
  font-weight: 700;
}

.greenbutton {
  width: 150px;
  height: 45px;
  line-height: 45px;
  background: #24c771;
  font-size: 18px;
  text-align: center;
  border-radius: 50px;
  color: #fff;
  margin: 60px auto 0;
}

.greenbutton:after {
  border: none;
  border-radius: 0;
}

.redbutton:after {
  border: none;
  border-radius: 0;
}

.orangebutton {
  width: 300px;
  height: 90px;
  line-height: 90px;
  background: #fe5a03;
  font-size: 36px;
  text-align: center;
  border-radius: 50px;
  color: #fff;
  margin: 120px auto 0;
}

.orangebutton:after {
  border: none;
  border-radius: 0;
}

.greenbutton-hover {
  background: linear-gradient(90deg, #24c771, #2eff90);
}

.greenbutton-hover,
.redbutton-hover {
  width: 300px;
  height: 90px;
  line-height: 90px;
  font-size: 36px;
  text-align: center;
  border-radius: 50px;
  color: #fff;
  margin: 120px auto 0;
  position: relative;
  top: 1px;
}

.redbutton-hover {
  background: #eb5150;
}

.btn {
  width: 80%;
  padding: 20px 0;
  border-radius: 10px;
  text-align: center;
  margin: 40px 10%;
  background: #000;
  color: #fff;
}

.drawer_screen {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
}

.drawer_box,
.drawer_screen {
  position: fixed;
  overflow: hidden;
}

.drawer_box {
  width: 600px;
  top: 50%;
  left: 50%;
  z-index: 1001;
  background: #fafafa;
  transform: translate(-50%, -60%);
  border-radius: 3px;
}

.drawer_title {
  padding: 15px;
  font: 35px microsoft yahei;
  text-align: center;
}

.drawer_content {
  padding: 40px 0 100px 50px;
}

.btn_ok {
  padding: 30px 50px 30px 0px;
  font: 40px microsoft yahei;
  text-align: right;
  color: #3cc51f;
}

.col-0 {
  line-height: 100px;
  text-align: center;
}

.suspendimg {
  width: 101px;
  height: 86px;
  display: block;
  margin: -60px auto 10px;
}

.suspendimg image {
  width: 100%;
  height: 100%;
}

.suspendtext {
  font-size: 30px;
}

.warningtip {
  display: flex;
  flex-direction: column;
  width: 85%;
  margin: 120px auto;
}

.warningtip .warningtipimg image {
  width: 94px;
  height: 80px;
  display: block;
}

.warningtip .warningtipimg {
  display: flex;
}

.warningtip .warningtiptxt {
  display: inline-block;
  font-size: 28px;
  color: #ed6263;
  margin-left: 20px;
}

.powerToStop {
  margin: 20px auto;
  background: #eb5150;
  color: #fff;
}

.bg-cloud {
  height: 100px;
}

.backindexbtn {
  margin: 10px auto;
  background: #fff;
  color: #767676;
}


.powerStart {
  margin: 10px auto;
  color: #fff;
}

.searchcable {
  width: 600px;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1001;
  background: #fafafa;
  transform: translate(-50%, -60%);
  border-radius: 3px;
}

.searchcable-b {
  padding: 40px 0 70px 50px;
}

.searchcable-m,
.zidongfinish {
  font-size: 40px;
}

.starting .waveBg,
.waiting .waveBg,
.nobind .waveBg {
  position: relative;
  left: 6px;
  top: 13px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
}
.content .waveBg {
  position: relative;
  left: 6px;
  top: 13px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
}
.content .waveBg .wave {
  width: 826px;
  height: 80%;
  position: absolute;
  left: 0;
  bottom: 0;
  
  animation: movewave 2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.nobind .waveBg .wave {
  width: 125px;
  height: 125px;
  position: absolute;
  left: 0;
  bottom: 0;
  
  background-size: contain;
  background-repeat: no-repeat;

  background-repeat: no-repeat;
}

.chargeStatusWrpper .waveBg .wave {
  background-size: contain;
}

.starting .waveBg .wave {
  width: 826px;
  height: 80%;
  position: absolute;
  left: 0;
  bottom: 0;
  
}

.waiting .waveBg .wave {
  width: 826px;
  height: 80%;
  position: absolute;
  left: 0;
  bottom: 0;
  
  background-position: bottom center;
  background-size: cover;
  background-origin: border-box;
}

@-webkit-keyframes movewave {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(-25%);
  }
}

@keyframes movewave {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(-25%);
  }
}
.publicNumber {
  height: 100px;
  overflow: hidden;
}

.publicNumberAA {
  margin-top: -25px;
  height: 100%;
}

.publicNumberBB {
  background-color: #fff;
  height: 25px;
}
.siteWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 30px;
}
.siteWrapper .siteName {
  font-size: 16px;
  color: #fff;
  margin-bottom: 10px;
}
.siteWrapper .sitePort {
  font-size: 14px;
  color: #fff;
}
.button-group{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
</style>
